<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${session.user.name}+'-|StarFall|'">用户设置</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/set.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font.css">
    <link rel="shortcut icon" href="img/starfall.png" type="image/x-icon">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
    <li><img th:src="@{'/head_img/'+${session.user.head}}" alt="" class="head head_img"><a class="head_set" href="javascript:">修改头像</a></li>
    <li><a href="javascript:" class="ul_me">我的</a></li>
    <li><a href="javascript:" class="ul_inf">修改信息</a></li>
    <li><a href="javascript:" class="ul_pass">修改密码</a></li>
    <li><a href="/home">返回主页</a></li>
</ul>
<input class="pageValue" type="hidden" th:value="${session.setPage}">
<div class="grayTips">
    <div class="tips">
        <p>提示</p>
        <div class="tipsContent" th:text="${session.setTips}"></div>
        <button class="tipsBtn" onclick="closeTips()">确定</button>
    </div>
</div>
<div class="grayConfirm">
    <div class="confirm">
        <p>提示</p>
        <div class="confirmContent"></div>
        <button class="confirmYes confirmBtn">确定</button>
        <button class="confirmNo confirmBtn">取消</button>
    </div>
</div>
<div class="square" id="square"></div>
<div class="me page" id="me">
    <div class="content">
        <table class="eleTable">
            <tr>
                <th colspan="2">你好！<span th:text="${session.user.name}">name</span></th>
                <th class="infTd"><div class="level">&nbsp;&nbsp;<span th:text="'lv:'+${session.userExp.level}">&nbsp;lv:1</span><span th:text="${session.userExp.exp}+'/'+${session.userExp.maxExp}">0/1</span><div class="exp"><div class="expBar"></div></div></div></th>
                <input class="expBarValue" type="hidden" th:value="${session.userExp.present}">
                <script src="./js/exp.js"></script>
            </tr>
            <tr>
                <td>用户名</td>
                <td class="infTd">：<span th:text="${session.user.user}">user</span></td>
                <td rowspan="5">&nbsp;<textarea disabled th:utext="${session.user.introduce}">介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf</textarea></td>
            </tr>
            <tr>
                <td>名称</td>
                <td class="infTd">：<span th:text="${session.user.name}">name</span></td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td class="infTd">：<span th:text="${session.user.email}">123@163.com</span></td>
            </tr>
            <tr>
                <td>等级</td>
                <td class="infTd">：<span th:text="${session.user.level}">1</span></td>
            </tr>
            <tr>
                <td>权限</td>
                <td class="infTd">：<span th:text="${session.user.promise}">1</span></td>
            </tr>
        </table>
        <br><br>
        <table class="eleTable topic">
            <tr class="tableTop">
                <th style="width: 50px;">图标</th>
                <th class="title">标题</th>
                <th style="width: 80px;"></th>
                <th class="date"></th>
                <th>查看/评论</th>
                <th class="operate">操作</th>
            </tr>
            <tr class="tableContent" th:each="topic : ${session.userTopic}">
                <td><img th:src="'./img/topic/icon/'+${topic.icon}" alt="" class="icon"></td>
                <td class="title"><a th:href="'/topic/html?html='+${topic.id}" th:text="${topic.title}">title</a></td>
                <td class="label"><a th:href="'/topic?label='+${topic.labelHref}" th:text="'['+${topic.label}+']'">label</a></td>
                <td class="date"><span th:text="${topic.date.split('-')[0]}">0000</span><br><span th:text="${topic.date.split('-')[1]}+'-'+${topic.date.split('-')[2]}">00-00</span></td>
                <td class="vc"><span th:text="${topic.view}">1</span><span th:text="${topic.comment}">2</span></td>
                <td>
                    <button th:onclick="|href('/topic/editTopic?id='+${topic.id})|">编辑</button>
                    <button th:onclick="|Delete(${topic.id})|">删除</button>
                </td>
            </tr>
        </table>
        <div class="topicPage">
            <a th:href="'javascript:'+|pageChange(1,${session.userTopicPage.getLastPage()})|" class="back"></a>
            <a th:href="'javascript:'+|pageChange(${session.userTopicPage.getPage()-1},${session.userTopicPage.getLastPage()})|" class="pre"></a>
            <span th:text="${session.userTopicPage.getPage()}+'/'+${session.userTopicPage.getLastPage()}">1/2</span>
            <a th:href="'javascript:'+|pageChange(${session.userTopicPage.getPage()+1},${session.userTopicPage.getLastPage()})|" class="next"></a>
            <a th:href="'javascript:'+|pageChange(${session.userTopicPage.getLastPage()},${session.userTopicPage.getLastPage()})|" class="last"></a>
        </div>
    </div>
</div>
<div class="information page" id="information">
    <form action="/set/information" method="post">
        <div class="content">
            <table class="eleTable">
                <tr>
                    <th colspan="2">哟！来改名字啦！别改的见不得人喔！</th>
                </tr>
                <tr>
                    <td>名称</td>
                    <td class="infTd">：<input type="text" th:value="${session.user.name}" name="name"></td>
                </tr>
            </table>
            <table class="eleTable">
                <tr>
                    <td style="vertical-align: top;">介绍 ：</td>
                    <td class="infTd">
                        <textarea th:text="${session.user.introduce}" name="introduce"></textarea>
                    </td>
                </tr>
            </table>
            <button type="submit">确认修改</button>
            &nbsp;&nbsp;&nbsp;
        <input class="varifyInput" type="text" maxlength="4" id="varifyInputI" name="code">
        <img class="vartifyImg" src="/jpegCode" alt="" id="seti_img_code" onclick="seti_Change()">
        </div>
    </form>
</div>
<div class="password page" id="password">
    <form action="/set/password">
        <div class="content">
            <table class="eleTable">
                <tr>
                    <th colspan="3" style="width: 500px;">改了密码记得记好，勤改密码，会减少盗号风险</th>
                </tr>
                <tr>
                    <td style="width: 80px;">原密码</td>
                    <td class="infTd" style="width: 230px;">：<input type="password" name="oldPassword"></td>
                </tr>
                <tr></tr>
                <tr>
                    <td>新密码</td>
                    <td class="infTd">：<input type="password" id="new_password" onkeyup="check_password_length()"></td>
                    <td class="infTd"><span id="tips_password"></span></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td class="infTd">：<input type="password" id="again_password" onkeyup="check_password_equal()" name="newPassword"></td>
                    <td class="infTd"><span id="tips_again_password"></span></td>
                </tr>
            </table>
            <button type="button" id="confirm_password">确认修改</button>
            &nbsp;&nbsp;&nbsp;
            <input class="varifyInput" type="text" maxlength="4" id="varifyInputP" name="code">
            <img class="vartifyImg" src="/jpegCode" alt="" id="setp_img_code" onclick="setp_Change()">
        </div>
    </form>
</div>
<div class="head_page page" id="head_page">
    <form method="post" action="/set/head" enctype="multipart/form-data" id="upload_head">
        <img th:src="@{'/head_img/'+${session.user.head}}" alt="" class="head img_preview1" id="img_preview1">&emsp;
        <img th:src="@{'/head_img/'+${session.user.head}}" alt="" class="head img_preview2" id="img_preview2">&emsp;
        <img th:src="@{'/head_img/'+${session.user.head}}" alt="" class="head img_preview3" id="img_preview3">
        <br>
        <br>
        <p id="info"></p>
        <input type="file" accept="image/jpeg, image/png, image/jpg" id="file" name="head_img">
        <br><br>
        <input type="button" id="submitHead" value="确认修改">
    </form>
</div>
</body>
<script src="js/set.js" type="text/javascript"></script>
</html>